<template>
  <div id="app">
    <div>
      <section>
        <label for="">姓名：</label>
        <input type="text" v-model="item.name">
      </section>
      <section>
        <label for="">年龄：</label>
        <input type="text" v-model="item.age">
      </section>
      <section>
        <label for="">邮箱：</label>
        <input type="email" v-model="item.emial">
      </section>
      <section>
        <label for="">性别：</label>
        <select v-model="item.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </section>
      <section>
        <label for="">兴趣爱好：</label>
        <label for="basketball"><input id="basketball" type="checkbox" value="篮球" v-model="item.hobby">篮球</label>
        <label for="football"><input id="football" type="checkbox" value="足球" v-model="item.hobby">足球</label>
        <label for="badminton"><input id="badminton" type="checkbox" value="羽毛球" v-model="item.hobby">羽毛球</label>
      </section>
      <section>
        <button @click="submit">提交</button>
      </section>
    </div>
    <div id="table">
      <table border="1" celspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>邮箱</th>
          <th>爱好</th>
        </tr>
        <tr v-for="(el,idx) in list" :key="idx">
          <td v-text="idx"></td>
          <td v-text="el.name"></td>
          <td v-text="el.age"></td>
          <td v-text="el.gender"></td>
          <td v-text="el.email"></td>
          <td><span v-for="(hb,hid) in el.hobby" :key="hid" v-text="hb"></span></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

export default {
  data:function(){
    return {
      item:{
        name:'',
        age:'',
        emial:'',
        gender:'男',
        hobby:[]
      },
      list:[]
    }
  },
  methods:{
    submit(){
      var vd = {};
      for(var k in this.item){
        if(k == 'hobby'){
          vd[k] = this.item[k].join('、');
        }else{
          vd[k] = this.item[k];
        }
      }
      this.list.push(vd);
      this.resetItem();
    },
    resetItem(){
      this.item = {
        name:'',
        age:'',
        emial:'',
        gender:'男',
        hobby:[]
      };
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
table{
  width:50%;
  margin:40px auto;
}
</style>